<template>
<!-- 登录/注册 -->
<div id="message" >
  <div class="messagehead">信息提交</div>
  <div class="message-wrap">
    <div class="message-item">
      <span>*</span>
      <x-input :max="20"
        v-model="projectname"
        title="项目名称:"
        placeholder="项目名称字数可输入20位以内"
        required>
      </x-input>
    </div>
    <div class="message-item" style="width: 100%;">
      <span>*</span>
      <x-address
          title="地址选择："
          v-model="addressValue"
          :key="Key"
          raw-value
          :list="addressData"
          @on-hide="logHide"
          :show.sync="showAddress"
          value-text-align="left"
          label-align="justify">
      </x-address>
      </div>
      <div id="addressitem" class="message-item">
         <span>*</span>
         <x-input title="项目详细地址:" :max="20" v-model='addressdetail' placeholder="详细地址字数可输入20位以内"  required></x-input>
      </div>
      <div class="message-item" >
         <span>*</span>
      <x-input title="项目联系电话:"  type="text" :max="11" v-model='phone' placeholder="请输入项目联系电话"  required></x-input>
     </div>
      <div class="message-item">
         <span>*</span>
         <x-input title="项目联系人:" v-model='contacter' placeholder="请输入项目联系人"  required></x-input>
      </div>
    <div class="message"> <span style="display: inline-block; width: 20px;text-align: center;  color: red; line-height: 35px;">*</span>项目概况:
      <yd-checkbox-group v-model="viewmark" style="padding: 0px 10px;">
        <yd-checkbox  val=1>是否打桩</yd-checkbox><br/>
        <yd-checkbox  val=2>是否基地开挖</yd-checkbox><br/>
        <yd-checkbox  val=3>是否已做防水层</yd-checkbox><br/>
      <div class="textareabox">
        <textarea placeholder="其他概况" v-model="overview" name="" id="" cols="30" rows="10"></textarea>
      </div>
      </yd-checkbox-group><br/>
    </div>
      <div class="message-item">
          <span></span>
          <x-input title="项目建设单位:" v-model='conunit'></x-input>
      </div>
      <div class="message-item">
          <span></span>
          <x-input title="项目总包单位:" v-model='totaluinit'></x-input>
      </div>
      <div class="message-item">
          <span></span>
          <x-input title="项目工程量:" v-model='quantity' ></x-input>
      </div>
      <div class="text">是否已发送附件至邮箱:<input @click="istrue" type="checkbox"/></div>
      <div class="message-item">
        <span></span>
        <div class="message-item" style="line-height: 50px; border-bottom: none;">
          项目图纸附件接收邮箱:&nbsp;&nbsp;&nbsp;&nbsp;abc20161718@126.com
        </div>

      </div>
      <!-- <div class="text">是否提供附件: <check-icon @click="istrue" :value.sync="demo" type="plain"></check-icon></div> -->
      <div class="message-item">
          <span></span>
          <x-input title="项目附件备注:" v-model="projectremark" ></x-input>
      </div>
      <div class="message-item" style="width: 100%; height: 100%;border: none;">
          <span></span>
          <x-input type="number" title="提交者联系方式:" v-model="submitterphone"></x-input>
      </div>
      <div class="text1" style="color: teal; height: 50px; line-height: 50px; padding: 0 20px; font-size: 14px;">收款方式与信息如下</div>
      <div class="message-item">
      <span></span>
      <x-input title="银行账号:" type="number" v-model="bankcode"></x-input>
      </div>
          <div class="message-item">
      <span></span>
      <x-input title="持卡人姓名:" v-model="cardholder"></x-input>
      </div>
          <div class="message-item">
      <span></span>
      <x-input title="开户行:" v-model="bankname"></x-input>
      </div>
          <div class="message-item">
      <span></span>
      <x-input title="支付宝姓名:" v-model="alipayname"></x-input>
      </div>
      <div class="message-item">
        <span></span>
        <x-input title="支付宝账号:" v-model="alipay"></x-input>
      </div>
      <div class="message-item">
        <span></span>
        <x-input title="微信账号:" v-model="wechat" ></x-input>
      </div>
      <div class="message-item" style="width: 100%; text-align: center; line-height:50px; color:teal;font-size:16px;">
        <span style="display:block;margin: 0 auto; width: 80%;color:teal;">
          咨询电话: 63339922
        </span>
      </div>
 </div>
 <div class="status">
   <span @click="todetail">提交</span>
 </div>
</div>
</template>
<script type="text/ecmascript-6">
import address from '@/components/index/address'
import { XInput, CheckIcon, Group, XButton, Cell, ChinaAddressV4Data, XAddress, Datetime, GroupTitle, Selector, PopupPicker, XNumber, XTextarea, XSwitch } from 'vux'
export default {
  data () {
    return {
      send: true,
      Key: 1,
      auditremark: '',
      viewmark: [],
      overview: '',
      projectname: '',
      Datalist: [],
      items: [],
      contacter: '',
      wechat: '',
      phone: '',
      conunit: '',
      alipayname: '',
      bankname: '',
      alipay: '',
      addressdetail: '',
      totaluinit: '',
      isannex: false,
      num: '',
      bankcode: '',
      cardholder: '',
      quantity: '',
      projectremark: '',
      submitterphone: '',
      addressData: address,
      addressValue: [],
      getAddress: '',
      showAddress: false,
      userId: ''
    }
  },
  created () {
    this.menu()
    this.userId = this.$route.query.wxuserinfoid
    var qs = require('querystring')
    this.$axios.post('http://www.ynyxgcxx.com/projectmanage/auth/messagep',
      qs.stringify({
        vid: this.userId
      })
    ).then((response) => {
      if (response.data.wxuserinfo.id !== '') {
        window.localStorage.setItem('userInfo', JSON.stringify(response.data))
      } else {
        console.log('跳转到微信公众号')
      }
    })
  },
  methods: {
    menu () {
      window.scrollTo(0, 0)
    },
    istrue () {
      if (this.isannex) {
        this.num = 0
        this.isannex = false
      } else {
        this.num = 1
        this.isannex = true
      }
    },
    logHide () {
      this.getAddress = ''
      // 地址处理
      for (var i = 0; i < ChinaAddressV4Data.length; i++) {
        for (var n = 0; n < this.addressValue.length; n++) {
          if (this.addressValue[n] === ChinaAddressV4Data[i].value) { this.getAddress += ChinaAddressV4Data[i].name }
        }
      }
    },
    // 提交数据
    todetail () {
      // 按钮禁用
      if (this.send) {
        if (!this.projectname) {
          this.$dialog.toast({
            mes: '请填写项目名称'
          })
          return
        }
        if (this.addressValue.length <= 0) {
          this.$dialog.toast({
            mes: '请填写项目地址'
          })
          return
        }
        if (!this.addressdetail) {
          this.$dialog.toast({
            mes: '请填写项目详细地址'
          })
          return
        }

        if (!this.phone) {
          this.$dialog.toast({
            mes: '请填写正确的项目电话'
          })
          return
        }
        if (this.contacter.length <= 0) {
          this.$dialog.toast({
            mes: '请填写项目联系人'
          })
          return
        }
        if (this.viewmark.length <= 0 && !this.overview) {
          this.$dialog.toast({
            mes: '请选择概况或输入其他概况'
          })
          return
        }
        this.send = false
        this.$axios.post('http://www.ynyxgcxx.com/projectmanage/app/projectinfo/add',
          this.confusion(
            JSON.stringify({
              projectname: this.projectname,
              address: this.getAddress,
              addressdetail: this.addressdetail,
              phone: this.phone,
              contacter: this.contacter,
              conunit: this.conunit,
              overview: this.overview,
              quantity: this.quantity,
              totaluinit: this.totaluinit,
              isannex: this.num,
              projectremark: this.projectremark,
              submitterphone: this.submitterphone,
              bankcode: this.bankcode,
              cardholder: this.cardholder,
              bankname: this.bankname,
              alipayname: this.alipayname,
              alipay: this.alipay,
              wechat: this.wechat,
              customerid: this.userId,
              viewmark: this.viewmark
            })
          ),
          {
            headers: {
              Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
              'Content-Type': 'application/json;charset=UTF-8',
              'Cache-Control': 'no-cache',
              isApp: 'isApp'
            }
          }
        )
          .then(response => {
            if (response.data === 'SUCCESS') {
              this.$dialog.toast({
                mes: '提交成功'
              })
              this.Key += 1
              this.projectname = ''
              this.addressValue = []
              this.addressdetail = ''
              this.phone = ''
              this.contacter = ''
              this.conunit = ''
              this.overview = ''
              this.quantity = ''
              this.totaluinit = ''
              this.isannex = ''
              this.projectremark = ''
              this.submitterphone = ''
              this.bankcode = ''
              this.cardholder = ''
              this.bankname = ''
              this.alipayname = ''
              this.alipay = ''
              this.wechat = ''
              this.customerid = ''
              this.viewmark = []
              this.isannex = false
              this.send = true
            } else {
              this.$dialog.toast({
                mes: response.data
              })
            }
          })
          .catch(error => {
            console.log(error)
            this.$dialog.toast({
              mes: '提交失败，请重试'
            })
            this.send = true
          })
      }
    }
  },
  components: {
    XInput,
    XButton,
    Datetime,
    Group,
    Cell,
    CheckIcon,
    ChinaAddressV4Data,
    XAddress,
    GroupTitle,
    Selector,
    PopupPicker,
    XNumber,
    XTextarea,
    XSwitch
  }
}
</script>
<style>
body .v-transfer-dom .vux-popup-dialog #addressitem .vux-cell-box .vux-popup-picker-select{
 width: 100%!important
}
</style>

<style scoped>
body,html{
  background: #fff;
}
#app{
    background: #fff;
}
.message-wrap{
  width: 100%;
  height: 100%;
  margin: 0px auto;
  padding-bottom:50px;
  overflow-x: hidden;
}
.messagehead{
  width: calc(100% - 20px);
  height: 16px;
  line-height: 16px;
  text-indent: 5px;
  text-align: left;
  margin: 10px auto;
  border-left: 5px solid teal;
  font-size: 14px;
  font-weight: bold;
  color:teal;
}
.text{
  padding: 15px 20px;
}
.text input{
  width: 15px;
  height: 15px;
  margin-left: 10px;
}
.status{
  position: fixed;
  bottom:0;
  display: flex;
  width: 100%;
  height: 40px;
  color:#fff;
  background: #085078;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #85D8CE, #085078);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #85D8CE, #085078);
}
.status span{
  flex: 1;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  width: 100%;
  height:40px;
  border-right:1px solid #ccc;
}
.message-item{
  display: flex;
  height: 50px;
  border-bottom: 1px solid #eee;
}
.message-item:last-child{
  border: none;
}
.message-item span{
  display: inline-block;
  width: 20px;
  text-align: center;
  color: red;
  line-height: 55px;
}
.weui-cell{
  flex: 1;
  padding: 15px 0!important;
}
.text1{
  background: #f2f2f2;
}

.message{
  border-bottom: 1px solid #ccc;
  padding: 5px 0px;
  line-height: 20px;
}
.textareabox{
  margin: 20px auto 0;
  width:  100%;
  height: 80px;
}
textarea{
  color: #777;
  width:100%;
  height: 100%;
  border: 1px solid #ccc;
}
.yd-checkbox{
  margin-top:5px;
}
#app .vux-cell-box .weui-cell__hd{
  width:50%!important;
}
.submitbtn{
  pointer-events: none;
}
</style>
